<template>
	<view>
		<view class="content">
			<view class="info u-flex">
				<image :src="detail.cover"></image>
				<view class="u-flex-1" style="overflow: hidden;">
					<view class="title u-line-2">{{detail.title}}</view>
					<view class="sku u-line-1">{{detail.des}}</view>
					<view class="price">{{detail.price}} i币</view>
				</view>
			</view>
			<view class="count-ib u-flex">
				<image src="/static/icon2/ib.png"></image>
				<text>{{detail.price}}</text>
			</view>
		</view>
		
		<view class="content">
			<view class="u-title">支付方式</view>
			<view class="pay-type u-flex">
				<image class="num1" src="/static/icon2/ib.png"></image>
				<view class="num2">i币支付</view>
				<view class="num3">当前i币：{{vuex_user.icoin}}</view>
				<u-checkbox v-model="checked" shape="circle" active-color="#f4d039"></u-checkbox>
			</view>
		</view>
		
		<view class="submit safe-area-inset-bottom u-flex">
			<view class="num1 u-flex-1">
				<text class="t1">合计：</text><text class="t2">{{detail.price}} i币</text>
			</view>
			<view class="num2" @click="submit">确定提交</view>
		</view>
		
		<u-mask :show="show" @click="show = !1">
			<rechargeib v-if="show" :info="info" @pay="show = !1"></rechargeib>
		</u-mask>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:!0,
				show:!1,
				course_id:'',
				detail:'',
				info:'',//传递给充值
			}
		},
		methods: {
			getDetail(){
				this.$u.api.courseDetail({
					course_id:this.course_id
				}).then(res=>{
					this.detail = res
					this.info = {
						price:res.price,
						goodsName:res.title,
						cover:res.cover
					}
				})
			},
			submit(){
				// 提交订单前验证i币是否够
				const price = Number(this.detail.price)
				const icoin = Number(this.vuex_user.icoin)
				if(price > icoin){
					// 余额不足
					this.show = !0
					return
				}
				uni.showModal({
					content:'是否购买？',
					success: (res) => {
						res.confirm && this.$u.api.coursePay({course_id:this.course_id}).then(res=>{
							this.$u.toast('购买成功')
							this.$store.dispatch('userInfo',this)
							setTimeout(()=>{
								uni.$emit('onBuyCourse' + this.course_id,!0)
								this.$app.back()
							},600)
						})
					}
				})
				
			}
		},
		onLoad(o) {
			this.course_id = o.id
			this.getDetail()
			// 更新用户信息
			this.$store.dispatch('userInfo',this)
		}
	}
</script>

<style>
	page{background-color: #F1F1F1;}
</style>
<style lang="scss" scoped>
	.content{background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 60rpx 0;
		.info{
			padding-bottom: 30rpx;border-bottom: 1rpx solid #eee;
			image{width: 160rpx;height: 160rpx;border-radius: 20rpx;display: block;flex-shrink: 0;margin-right: 22rpx;}
			.title{font-weight: bold;font-size: 29rpx;line-height: 40rpx;height: 80rpx;}
			.sku{font-size: 26rpx;color: #555;padding-bottom: 10rpx;}
			.price{color: #F55332;font-size: 24rpx;font-weight: bold;}
		}
		.count-ib{padding-top: 15rpx;justify-content: flex-end;
			image{width: 36rpx;height: 36rpx;display: block;}
			text{font-weight: bold;font-size: 30rpx;color: #F55332;padding-left: 10rpx;}
		}
		.u-title{font-size: 30rpx;font-weight: bold;}
		.pay-type{
			height: 70rpx;white-space: nowrap;padding-top: 20rpx;
			image{width: 36rpx;height: 36rpx;display: block;flex-shrink: 0;}
			.num2{margin-right: auto;margin-left: 15rpx;}
			.num3{margin-right: 20rpx;}
			/deep/ .u-checkbox__label{display: none;}
		}
	}
	.submit{position: fixed;left: 50%;transform: translateX(-50%);width: 630rpx;height: 80rpx;bottom: 50rpx;
		z-index: 99;box-sizing: content-box;
		.num1{background-color: #fff;border-radius: 100rpx 0 0 100rpx;height: 80rpx;line-height: 80rpx;
			.t1{color: #666;padding-left: 30rpx;}
			.t2{color: #F55332FF;font-size: 34rpx;padding-left: 10rpx;font-weight: bold;}
		}
		.num2{border-radius: 0 100rpx 100rpx 0;background: linear-gradient(90deg, #FAE273 0%, #F4D039 100%);width: 180rpx;height: 80rpx;text-align: center;line-height: 80rpx;font-weight: bold;font-size: 32rpx;color: #fff;}
	}
</style>
